
  $(function () {

    // 1.1 请求参数 全局变量
    let params = {
      // string	搜索关键词，可以为空，为空返回某类型所有文章
      key: "",
      // string	文章类型id，可以为空，为空返回所有类型文章
      type: "",
      // string	文章状态，草稿 ，已发布,为空返回所有状态文章
      state: "",
      // number	当前页，为空返回第1页
      page: 1,
      // number	每页显示条数，为空默认每页6条
      perpage: 10
    }
  
  
    // 1.2 发送请求获取文章列表数据 /admin/article/query
    function articleQuery() {
      $.get("/admin/article/query", params, function (res) {
        const html = template("trTpl", { list: res.data.data });
        $("tbody").html(html);
  
  
        renderPager(res.data.totalCount);
      })
    }
  
    // 2 发送请求 获取 文章列表数据 /admin/category/list
    function getCategoryList() {
      $.get("/admin/category/list", function (res) {
        let html = "<option value='' >所有类型</option>";
        res.data.forEach(value => {
          html += `<option value="${value.id}" >${value.name}</option>`;
        });
        $("#selCategory").html(html);
      })
    }
  
  
    // 3 动态渲染分页组件
    function renderPager(count) {
      layui.laypage.render({
        elem: 'pager',
        count,
        // 默认 每一页的数据条数 10,
        limit: params.perpage,
        // 显示页码 
        curr: params.page,
        // 点击页码事件
        jump(obj, first) {
          //首次不执行
          if (!first) {
            // 获取被点击的页码
            // console.log(obj.curr);
            params.page = obj.curr;
            articleQuery();
  
          }
        }
      });
  
    }
  
  
    // 4  给筛选按钮 绑定点击事件
    $("#btnSearch").click(function () {
      // 标题
      params.key = $("#aname").val();
      // 文章类型
      params.type = $("#selCategory").val();
      // 发布状态
      params.state = $("#selStatus").val();
  
      // 有bug  往往都需要 重置 分页参数  
      // 一旦 实现筛选功能 往往都需要 重置 页码 
      params.page = 1;
      // 发送请求 获取对应的数据
      articleQuery();
  
  
    })
  
    // 5 给重置按钮 绑定点击事件
    $("#btnReset").click(function () {
      // location.reload(); // 刷新页面   不行 不太好 
      // 为什么我们需要使用 ajax 异步网络请求 不要整个页面刷新 网页资源 图片 css文件 js 文件 字体图标  重新加载一次 
  
      // return
      // 5.1 请求参数
      params = { key: "", type: "", state: "", page: 1, perpage: 10 };
      // 5.2 搜索表单
      $("#aname").val("");
      // 文章类型
      $("#selCategory").val("");
      // 发布状态
      $("#selStatus").val("");
  
      // 5.3 重置分页组件  不需要做  因为在 获取文章列表的时候 内部 已经重置 组件
      // 5.4 刷新页面
      articleQuery();
  
    })
  
    // 6 删除按钮 delete  委托
    $("tbody").on("click", ".delete", function () {
      // console.log(12345);
      //  console.log('%c'+"大大的打印","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");
  
  
      // console.log(id);
      layer.confirm("您确定要删除吗", (index) => {
        layer.close(index);
        const id = $(this).parents("tr").data("id");
        $.post("/admin/article/delete", { id }, function (res) {
          if (res.code === 200) {
            // 刷新数据
            articleQuery();
          }
  
        })
  
  
      })
  
    })
  
    articleQuery();
    getCategoryList();
  
  })